import React, { Component } from 'react';
import logo from '../assets/logo192.png'
import { NavBar } from 'antd-mobile'

import { Checkbox, Space } from 'antd-mobile'
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux'
import { request_add_shopcart_action, request_sub_shopcart_action } from '../store/ActionCreator'

class MyCart extends Component {
    state = {
        cartlist: [
            { pic: logo, name: 'cosme decorte 黛珂牛油果乳液150ml', price: 205 },
            { pic: logo, name: 'cosme decorte 黛珂牛油果乳液150ml', price: 205 },
            { pic: logo, name: 'cosme decorte 黛珂牛油果乳液150ml', price: 205 }
        ],
        totolprice: 0,
        totolcount: 0
    }
    render() {
        return (
            <div className='mycart'>
                <NavBar >购物车</NavBar>
                {
                    this.props.shopcartlist.map((item, index) => {
                        return (
                            <div className='acart' key={index}>
                                <Space direction='vertical'>
                                    <Checkbox />
                                </Space>
                                <img src={item.pic} alt="" />
                                <div className='name'>
                                    <div className='cartname'>{item.name}</div>
                                    <div className='price'>
                                        <div>￥{item.salesPrice.value}</div>
                                        <div>
                                            <button onClick={() => { this.props.request_sub_shopcart(item) }}>-</button>
                                            <span>{item.count}</span>
                                            <button onClick={() => { this.props.request_add_shopcart(item) }}>+</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
                <div className="totol">
                    <Space direction='vertical'>
                        <Checkbox>全选</Checkbox>
                    </Space>
                    <div className='totols'>
                        <div className="totolprice">总价：<span>￥{this.props.shopcartlist.reduce((t, item) => {
                            return t + item.count * item.salesPrice.value
                        }, 0)}</span></div>
                        <button>去结算（{this.props.shopcartlist.reduce((t, item) => {
                            return t + item.count
                        }, 0)}）</button>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect(
    (state) => {
        return {
            shopcartlist: state.shopcartlist
        }
    },
    (dispatch) => {
        return {
            request_add_shopcart(params) {
                dispatch(request_add_shopcart_action(params))
            },
            request_sub_shopcart(params) {
                dispatch(request_sub_shopcart_action(params))
            }
        }
    }
)(withRouter(MyCart));